import React from 'react'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import http from '../../utils/http'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { setUserStrote } from '../../store/UserSlice'


function Index() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const onFinish = async (value) => {
    const res = await http.post('/api/login', value)

    console.log(res);

    const { code, data } = res.data

    if (code === 200) {
      localStorage.setItem('token', data.token)
      localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
      dispatch(setUserStrote(data))
      navigate('/')
    }

  }
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            登录
          </Button>
        }
      >
        <Form.Item
          name='username'
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' }]}
        >
          <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
          name='password'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input placeholder='请输入密码' />
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
